<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../lib/bootstrap-3.3.7.css" rel="stylesheet">
    <style>
        #dv{
            position: relative;
        }
        #dv>div:last-child{
            width: 600px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -300px;
            z-index: 1000;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(0,0,0,.7);
        }
    </style>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../lib/vue-resource-1.3.4.js"></script>
</head>
<body>
    <div id="dv">
        <div class="mask" v-show="flag"></div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">学生课程</h3>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">学生id</label>
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="学生id" v-model="student_id">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputName">课程id</label>
                        <input type="text" class="form-control" id="exampleInputName" placeholder="课程id" v-model="course_id">
                    </div>
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
                </form>

                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>学生ID</th>
                        <th>学生姓名</th>
                        <th>课程ID</th>
                        <th>课程名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list">
                        <td>{{ item.id }}</td>
                        <td>{{ item.student_id }}</td>
                        <td>{{ item.student_name }}</td>
                        <td>{{ item.course_id }}</td>
                        <td>{{ item.course_name }}</td>
                        <td>
                            <a href="" class="btn btn-primary" @click.prevent="modify(item.id)">修改</a>
                            <a href="" class="btn btn-warning" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <nav aria-label="Page navigation">
                    <ul class="pagination" v-if="list">
                        <li>
                            <a href="#" aria-label="Previous" @click.prevent="prev">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="index in Math.ceil(total / showStudent.size)">
                            <a href="#" @click.prevent="choosePage(index)">{{ index }}</a>
                        </li>
                        <li>
                            <a href="#" aria-label="Next" @click.prevent="next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="panel panel-primary" v-show="flag">
            <div class="panel-heading">
                <h3 class="panel-title">修改学生课程</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">学生id</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputEmail3" placeholder="学生id" v-model="upStuId">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">课程id</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword3" placeholder="课程id" v-model="upCorId">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" class="btn btn-primary" @click="update">确定</button>
                            <button type="button" class="btn btn-warning" @click="flag=false">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script src="../js/show.js"></script>
</body>
</html>